<template>
  <div class="view-collection-area">
    <el-button type="primary" plain size="mini" @click="getAListOfPlans(id)"
      >采集区域</el-button
    >
    <el-dialog
      style="width: "
      class="dialog"
      
      title="查看采集区域"
      :visible.sync="viewCollectionArea.outerVisible"
    >
      <el-card>
        <div class="header" style="display:none">
          <el-button size="mini" type="primary" @click="allOptions"
            >全选</el-button
          >
          <el-button size="mini" type="primary" @click="unhideOptions"
            >取消</el-button
          >
        </div>

        <el-cascader-panel
          v-model="viewCollectionArea.temporary"
          :options="options"
          :props="viewCollectionArea.props"
          collapse-tags
          @change="changecollectTaskTown"
        ></el-cascader-panel>

        <!-- <Cascader></Cascader> -->


      </el-card>
      <div class="bottom">
        <el-button
        style="display:none"
          type="primary"
          class="btn-block"
          size="mini"
          @click="SaveCollectionArea"
          >保存采集区域</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { editDisplay } from "@/library";
// import assignment from "@/mixin/assignment.js";
export default {
//   mixins: [assignment],
  name: "viewCollectionArea",
  props: {
    id: Number,
  },
  data() {
    return {
      viewCollectionArea: {
        showCheckbox: false,
        outerVisible: false,
        temporary: [],
        props: {
          multiple: true,
        },
        count: 1,
      },
        villageMatch: [],
        townMatch: [],
        townVillage: {},
        townVillageCopy: {},
    };
  },
  computed: {
    ...mapGetters({
      options: "getTreeData/filtersVillage",
    }),
    nh() {
      return [
        {
          value: "440605",
          label: "南海区",
          children: this.options,
        },
      ];
    },
  },
    mounted() {
        this.villageInit()
    },
  methods: {
    villageInit() {
      this.options.forEach((item) => {
        this.townMatch.push(item.value);
        this.villageMatch.push([
          ...JSON.stringify([item.children]).match(/\d{12}/g),
        ]);
      });
    },
    changecollectTaskTown(e) {
      let newSelect = new Map();
      // ,newSelectTown = [],children;
      e.forEach((item) => {
        let town;
        let townIndex = this.townMatch?.indexOf(item[0]);
        let villageIndex = this.villageMatch[townIndex]?.indexOf(item[1]);
        town = JSON.parse(JSON.stringify(this.options[townIndex]));
        town.children = [
          JSON.parse(
            JSON.stringify(this.villageMatch[townIndex][villageIndex])
          ),
        ];

        if (newSelect.get(town.value)) {
          newSelect.get(town.value).children = [
            ...newSelect.get(town.value).children,
            ...town.children,
          ];
        } else {
          newSelect.set(town.value, town);
        }
      });
      newSelect.forEach((item, key) => {
        // newSelectTown.push(item);
        this.townVillage[key] = item.children;
      });
      console.log(JSON.stringify(this.townVillage));
      // this.townVillage = newSelectTown;
    },

    makeData(list, upArray, dataSource) {
      dataSource.forEach((item) => {
        const array = [...upArray, item.value];
        list.push(array);
        if (item.children) {
          this.makeData(list, array, item.children);
        }
      });
    },
    allOptions() {
      const list = [];
      this.makeData(list, [], this.options);
      this.viewCollectionArea.temporary = list;
    },
    unhideOptions() {
      this.viewCollectionArea.temporary = [];
    },
    getAListOfPlans(id) {
      this.$axios
        .get("task/task/getAListOfPlans?planInfo.id=" + id)
        .then((res) => {
          if (res.errorCode === "00000") {
            this.viewCollectionArea.temporary = editDisplay(
              res.data.list[0].treeData.list
            );
            this.viewCollectionArea.outerVisible = true;
          }
        });
    },
    handleCheckChange(data, checked, indeterminate) {
      this.viewCollectionArea.temporary.push(data);
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    changeCollectionArea() {
      this.viewCollectionArea.showCheckbox = !this.viewCollectionArea
        .showCheckbox;
      this.viewCollectionArea.temporary = [];
    },
    SaveCollectionArea() {
      console.log();
    },
  },
};
</script>

<style lang="scss" scoped>
.view-collection-area {
  .dialog {
    margin: 0 auto;
    width: 45%;

    .el-card {
      padding: 15px 0;

      .main {
        padding: 20px;
      }
    }
    .header {
      padding: 5px 0;
    }
    .el-cascader-panel {
      margin-top: 15px;
    }

    .el-cascader-menu__wrap {
      min-height: 350px !important;
    }
  }

  .bottom {
    margin-top: 10px;
  }
}
</style>
